<ui:composition template="/WEB-INF/template.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">

    <ui:define name="head">
        <link rel="stylesheet" type="text/css" href="/MeteoCal/resources/css/cmEvent.css" />
        <title>Create/Modify Event</title>
        <f:metadata>
            <f:viewParam name="id" value="#{eventBean.eventId}" />
            <f:viewAction action="#{eventBean.loadEvent()}" />
        </f:metadata>
    </ui:define>

    <ui:define name="content">
        <p:outputPanel rendered="#{eventBean.modifiableByCurrentUser}">
            <h:form>
                <h:panelGrid id="cmEventGrid" columns="3">
                    <p:outputLabel value="Event Name" for="eventName" />
                    <p:inputText id="eventName" value="#{eventBean.event.name}" >
                        <p:ajax update="eventNameMsg" />
                    </p:inputText>
                    <p:message id="eventNameMsg" for="eventName"/>
                    <p:outputLabel value="Date" for="eventDate" />
                    <p:calendar id="eventDate" value="#{eventBean.event.date}" pattern="dd/MM/yyyy HH:mm"
                                mindate="#{eventBean.now}">
                        <p:ajax update="eventDateMsg" />
                    </p:calendar>
                    <p:message id="eventDateMsg" for="eventDate" />
                    <p:outputLabel value="City" for="city" />
                    <p:inputText id="city" value="#{eventBean.event.city}" >
                        <p:ajax update="cityMsg" />
                    </p:inputText>
                    <p:message id="cityMsg" for="city" />
                    <p:outputLabel value="Country" for="country" />
                    <p:inputText id="country" value="#{eventBean.event.country}" >
                        <p:ajax update="countryMsg" />
                    </p:inputText>
                    <p:message id="countryMsg" for="country" />
                    <p:outputLabel value="Scope" for="scope" />
                    <p:selectOneRadio id="scope" value="#{eventBean.event.scope}" >
                        <c:forEach items="#{eventBean.possibleScopes}" var="scopeType" >
                            <f:selectItem itemLabel="#{scopeType}" itemValue="#{scopeType}" />
                        </c:forEach>
                    </p:selectOneRadio>
                    <p:message id="scopeMsg" for="scope" />
                    <p:outputLabel value="Location Type" for="locationType" />
                    <p:selectOneRadio id="locationType" value="#{eventBean.event.locationType}" >
                        <p:ajax event="change" update="threshold" />
                        <c:forEach items="#{eventBean.possibleLocations}" var="locType" >
                            <f:selectItem itemLabel="#{locType}" itemValue="#{locType}" />
                        </c:forEach>
                    </p:selectOneRadio>
                    <p:message id="locationTypeMsg" for="locationType" />
                    <p:outputLabel value="Bad Weather Threshold" for="threshold" />
                    <p:selectOneMenu id="threshold" value="#{eventBean.event.badWeatherThreshold}"
                                     disabled="#{eventBean.event.indoor}" >
                        <f:selectItems value="#{eventBean.thresholdChoices}" />
                    </p:selectOneMenu>
                    <p:message id="thresholdMsg" for="threshold" />
                    <p:commandButton value="Save" action="#{eventBean.save()}" update="cmEventGrid" />
                </h:panelGrid>
            </h:form>
        </p:outputPanel>
    </ui:define>
</ui:composition>